<template>
  <div>
    <!-- 供货信息 - 已完善 -->
    <Card dis-hover>
      <Row class="card-title" type="flex" justify="space-between">
        <Col>维护供货信息</Col>
        <Row type="flex" justify="space-between">
          <el-button
            v-preventReClick
            type="text"
            size="large"
            :loading="saveBtnLoading"
            class="save-btn"
            @click="save"
            >保存</el-button
          >
        </Row>
      </Row>
      <Row type="flex" style="padding-top: 20px">
        <Col span="4" style="margin-right: 30px">状态：{{ this.state || "待完善" }}</Col>
        <Col span="6" style="margin-right: 30px">管理区域：{{ topInfo.manageArea }}</Col>
        <Col span="10">商品名称：{{ topInfo.productName }}</Col>
      </Row>
      <div v-if="topInfo.isSaleMultiUnit == '1' || topInfo.isPurchaseMultiUnit == '1'">
        <supplier-info-multi
          ref="gong"
          :topinfo="topInfo"
          :productUuid="productUuid"
          @updateLoadingState="updateLoadingState"
        />
      </div>
      <div v-else>
        <supplier-info
          ref="gong"
          :topinfo="topInfo"
          :productUuid="productUuid"
          @updateLoadingState="updateLoadingState"
        />
      </div>
    </Card>
  </div>
</template>

<script>
import { ApiRequest } from '@api/basePage';
import SupplierInfo from '@/components/commodity/addSupplyInfo/complatedAddSupply';
import SupplierInfoMulti from '@/components/commodity/addSupplyInfo/complatedAddSupplySteel';

export default {
  components: {
    SupplierInfo,
    SupplierInfoMulti
  },
  data () {
    return {
      saveBtnLoading: false,
      topInfo: {},
      productUuid: '',
      state: ''
    };
  },
  mounted () {},
  created () {
    this.productUuid = this.$route.query.productUuid;
    this.state = this.$route.query.state;
    this.getDefaultDataNew();
  },
  methods: {
    getDefaultDataNew () {
      let data = {
        productUuid: this.productUuid
      };
      ApiRequest(
        '/sysback/supplyproductrel/getTopInfo',
        'post',
        data,
        true
      ).then(res => {
        if (res.retStatus == '1') {
          this.topInfo = res.retData;
        }
      });
    },
    save () {
      this.$refs.gong.save();
    },
    submit () {
      this.$refs.gong.submit();
    },
    updateLoadingState (state) {
      this.saveBtnLoading = state;
    }
  }
};
</script>

<style lang="less" scoped>
.save-btn {
  margin-top: 10px;
}
.card-title {
  font-size: 16px;
  color: #17233d;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  margin-top: -16px;
  border-bottom: 1px solid #e8eaec;
}
</style>
